<template>
  <uv-overlay
    :show="!isConnected"
    :zIndex="zIndex"
    @touchmove.stop.prevent="noop"
    :customStyle="{
      backgroundColor: '#fff',
      display: 'flex',
      justifyContent: 'center',
    }"
  >
    <view class="uv-no-network">
      <uv-icon :name="image" size="150" imgMode="widthFit" class="uv-no-network__error-icon"></uv-icon>
      <text class="uv-no-network__tips">{{ tips }}</text>
      <!-- 只有APP平台，才能跳转设置页，因为需要调用plus环境 -->
      <!-- #ifdef APP-PLUS -->
      <view class="uv-no-network__app">
        <text class="uv-no-network__app__setting">请检查网络，或前往</text>
        <text class="uv-no-network__app__to-setting" @tap="openSettings">设置</text>
      </view>
      <!-- #endif -->
      <view class="uv-no-network__retry">
        <uv-button size="mini" text="重试" type="primary" plain @click="retry"></uv-button>
      </view>
    </view>
  </uv-overlay>
</template>

<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js'

/**
 * noNetwork 无网络提示
 * @description 该组件无需任何配置，引入即可，内部自动处理所有功能和事件。
 * @tutorial https://www.uvui.cn/components/noNetwork.html
 * @property {String}			tips 	没有网络时的提示语 （默认：'哎呀，网络信号丢失' ）
 * @property {String | Number}	zIndex	组件的z-index值
 * @property {String}			image	无网络的图片提示，可用的src地址或base64图片
 * @event {Function}			retry	用户点击页面的"重试"按钮时触发
 * @example <uv-no-network></uv-no-network>
 */
export default {
  name: 'uv-no-network',
  mixins: [mpMixin, mixin, props],
  data() {
    return {
      isConnected: true, // 是否有网络连接
      networkType: 'none', // 网络类型
    }
  },
  mounted() {
    this.isIOS = uni.getSystemInfoSync().platform === 'ios'
    uni.onNetworkStatusChange((res) => {
      this.isConnected = res.isConnected
      this.networkType = res.networkType
      this.emitEvent(this.networkType)
    })
    uni.getNetworkType({
      success: (res) => {
        this.networkType = res.networkType
        this.emitEvent(this.networkType)
        if (res.networkType == 'none') {
          this.isConnected = false
        } else {
          this.isConnected = true
        }
      },
    })
  },
  methods: {
    retry() {
      // 重新检查网络
      uni.getNetworkType({
        success: (res) => {
          this.networkType = res.networkType
          this.emitEvent(this.networkType)
          if (res.networkType == 'none') {
            this.$uv.toast('无网络连接')
            this.isConnected = false
          } else {
            this.$uv.toast('网络已连接')
            this.isConnected = true
          }
        },
      })
      this.$emit('retry')
    },
    // 发出事件给父组件
    emitEvent(networkType) {
      this.$emit(networkType === 'none' ? 'disconnected' : 'connected')
    },
    async openSettings() {
      if (this.networkType == 'none') {
        this.openSystemSettings()
        return
      }
    },
    openAppSettings() {
      this.gotoAppSetting()
    },
    openSystemSettings() {
      // 以下方法来自5+范畴，如需深究，请自行查阅相关文档
      // https://ask.dcloud.net.cn/docs/
      if (this.isIOS) {
        this.gotoiOSSetting()
      } else {
        this.gotoAndroidSetting()
      }
    },
    network() {
      var result = null
      var cellularData = plus.ios.newObject('CTCellularData')
      var state = cellularData.plusGetAttribute('restrictedState')
      if (state == 0) {
        result = null
      } else if (state == 2) {
        result = 1
      } else if (state == 1) {
        result = 2
      }
      plus.ios.deleteObject(cellularData)
      return result
    },
    gotoAppSetting() {
      if (this.isIOS) {
        var UIApplication = plus.ios.import('UIApplication')
        var application2 = UIApplication.sharedApplication()
        var NSURL2 = plus.ios.import('NSURL')
        var setting2 = NSURL2.URLWithString('app-settings:')
        application2.openURL(setting2)
        plus.ios.deleteObject(setting2)
        plus.ios.deleteObject(NSURL2)
        plus.ios.deleteObject(application2)
      } else {
        var Intent = plus.android.importClass('android.content.Intent')
        var Settings = plus.android.importClass('android.provider.Settings')
        var Uri = plus.android.importClass('android.net.Uri')
        var mainActivity = plus.android.runtimeMainActivity()
        var intent = new Intent()
        intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
        var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
        intent.setData(uri)
        mainActivity.startActivity(intent)
      }
    },
    gotoiOSSetting() {
      var UIApplication = plus.ios.import('UIApplication')
      var application2 = UIApplication.sharedApplication()
      var NSURL2 = plus.ios.import('NSURL')
      var setting2 = NSURL2.URLWithString('App-prefs:root=General')
      application2.openURL(setting2)
      plus.ios.deleteObject(setting2)
      plus.ios.deleteObject(NSURL2)
      plus.ios.deleteObject(application2)
    },
    gotoAndroidSetting() {
      var Intent = plus.android.importClass('android.content.Intent')
      var Settings = plus.android.importClass('android.provider.Settings')
      var mainActivity = plus.android.runtimeMainActivity()
      var intent = new Intent(Settings.ACTION_SETTINGS)
      mainActivity.startActivity(intent)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
.uv-no-network {
  @include flex(column);
  justify-content: center;
  align-items: center;
  margin-top: -100px;

  &__tips {
    color: $uv-tips-color;
    font-size: 14px;
    margin-top: 15px;
  }

  &__app {
    @include flex(row);
    margin-top: 6px;

    &__setting {
      color: $uv-light-color;
      font-size: 13px;
    }

    &__to-setting {
      font-size: 13px;
      color: $uv-primary;
      margin-left: 3px;
    }
  }

  &__retry {
    @include flex(row);
    justify-content: center;
    margin-top: 15px;
  }
}
</style>
